import React from 'react';
import IScroll from '../../../assets/js/libs/iscroll';
import {lazyImg, localParam} from '../../../assets/js/utils/index';
import  * as Request from '../../../services/home/index';
import Css from '../../../assets/css/goods/items.css';

class Items extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            aGoods: []
        }
    }

    componentDidMount(){
        this.getGoodsData(this.props);
    }

    componentWillReceiveProps(newProps){
        this.getGoodsData(newProps);
    }

    componentWillUnmount(){
        //页面卸载时，重写setState,避免内存溢出
        this.setState = (state, callback) => {
            return ;
        }
    }

    //获取商品数据
    getGoodsData(props){
        let { search: { cid } } = localParam(props.location.search);
        cid = !!cid ? cid : '';
        Request.getGoodsData(cid).then(res => {
            if(res.code === 200){
                this.setState({ aGoods: res.data }, () => {
                    this.eventScroll();
                    lazyImg();
                    this.myScroll.on('scrollEnd', () => {
                        //监听滚动结束事件，再次执行图片懒加载;
                        lazyImg();
                    });
                });
            }else{
                this.setState({ aGoods: [] });
            }
        });
    }

    //设置滚动
    eventScroll(){
        document.getElementById('goods-content-main').addEventListener('touchmove',function(e){ e.preventDefault(); }, false);
        this.myScroll = new IScroll('#goods-content-main', {
            scrollX: false,
            scrollY: true,
            preventDefault: false
        });
    }

    //页面跳转
    goPage(url){
        this.props.history.push(window.base.config.path+url);
    }

    render(){
        const { aGoods } = this.state;
        return (
            <div id='goods-content-main' className={Css['goods-content-main']}>
                <div>
                    {aGoods && aGoods.length > 0 ? aGoods.map(item => {
                        return (
                            <div key={item.cid} className={Css['goods-wrap']}>
                                <div className={Css['classify-name']}>{item.title}</div>
                                <div className={Css['goods-item-wrap']}>
                                    {item.goods && item.goods.length > 0 ? item.goods.map(ktem => {
                                        return (
                                            <div key={ktem.gid} className={Css['goods-item']} onClick={() => this.goPage('goods/details/item?gid='+ktem.gid)}>
                                                <div className={Css['goods-item-image']}>
                                                    <img src={require('../../../assets/images/common/lazyImg.jpg')} data-echo={ktem.image} alt={ktem.title} />
                                                </div>
                                                <div className={Css['goods-item-text']}>{ktem.title}</div>
                                            </div> 
                                        )
                                    }) : ''}
                                </div>
                            </div>
                        )
                    }) : <div className={Css['no-data-tips']}>暂无相关商品</div>}
                </div>
            </div>
        )
    }
}

export default Items;